<template>
  <div class="imgCon" :style="{width: comObj.width + 'px', height: comObj.height + 'px'}">
    <img :src="comObj.url" alt :style="{ borderRadius: comObj.borderRadius + 'px' }" />
  </div>
</template>
<script>
// import { Container, Draggable } from "vue-smooth-dnd";
import { mapGetters } from "vuex";
export default {
  props: ["comObj", "nowComIdx"],
  data() {
    return {
      x: 0,
      y: 0,
      unit: "px"
    };
  },
  computed: {
    ...mapGetters(["ImgObj"])
  },
  watch: {
    ImgObj: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON");
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.comObj)
  },
  methods: {
    resize(newRect) {
      this.x = newRect.left;
      this.y = newRect.top;
      this.ImgObj.width = newRect.width;
      this.ImgObj.height = newRect.height;
    },
    imgStyle() {
      this.$emit('imgStyle')
    }
  }
};
</script>

<style lang="scss" scoped>
.imgCon {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
